<template>
	<view class="cart_item" @click="linkTo(path, params)">
		<view class="title">{{title}}</view>
		<view class="middle">{{middle}}</view>
		<view class="bottom">
			<view class="icon success" v-if="type === 'success'">{{buttonText}}</view>
			<view class="icon warning" v-else-if="type === 'warning'">{{buttonText}}</view>
			<view class="icon error" v-else-if="type === 'error'">{{buttonText}}</view>
			<view class="icon info" v-else-if="type === 'info'">{{buttonText}}</view>
			<view class="right_text" >{{rightText}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			type: String,
			middle: String,
			rightText: String,
			buttonText: String,
			path: String,
			params: String
		},
		data() {
			return {
				
			}
		},
		methods: {
			linkTo(path, params) {
				uni.navigateTo({
					url: path + params,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.cart_item{
	font-family: PingFang SC;
	width: 705rpx;
	background: #FFFFFF;
	border-radius: 27rpx;
	padding: 40rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
  .title{

	font-weight: 500;
	font-size: 36rpx;
	color: #000000;
	line-height: 19rpx;
	margin-bottom: 20rpx;
  }
  .middle{
	  font-weight: 400;
	  font-size: 31rpx;
	  color: #092255;
	  line-height: 40rpx;
	  margin-bottom: 27rpx;
  }
  .bottom{
	  display: flex;
  }
  .icon{
	 height: 53rpx;
	 line-height: 53rpx;
	 
	 border-radius: 7rpx; 
	 padding: 0 27rpx;
	 box-sizing: border-box;
	 text-align: center;
	 font-weight: 500;
	 font-size: 27rpx;
	 margin-right: 11rpx;
	 
  }
  .icon.success{
	  color: #31CEAB;
	  background: #E8F7F4;
  }
  .icon.warning{
  	  color: #FF9200;
  	  background: #FFF4E5;
  }
  .icon.info{
  	  color: #00B5FF;
  	  background: #DFF6FF;
  }
  .icon.error{
  	  color: #FF5570;
  	  background: #FFEFF2;
  }
  .right_text{
	  font-weight: 400;
	  font-size: 27rpx;
	  color: #616E87;
	  line-height: 53rpx;
  }
}
</style>
